<style>
#mapSvg .aaa:after {
  content: ".";
  clear: both;
  display: block;
  overflow: hidden;
  font-size: 0;
  height: 0;
}
.mapBox {
  padding: 0 30px;
}
#mapSvg .nodetext {
  font-size: 12px;
  font-family: SimSun;
  fill: #000000;
}
#mapSvg .linetext {
  font-size: 12px;
  font-family: SimSun;
  fill: #1f77b4;
  fill-opacity: 0;
}

#mapSvg .circleImg {
  /*stroke: #ff7f0e;*/
  stroke-width: 3px;
}
#mapSvg .relative {
  /*position: relative;*/
}
#mapSvg #d3 {
  box-sizing: border-box;
  display: block;
  position: relative;
  /*top: -260px;*/
  z-index: 0;
}
#mapSvg #d3 svg {
  box-sizing: border-box;
  display: block;
}
#mapSvg .ceshi {
  box-sizing: content-box;
  display: block;
  height: 900px;
}

#mapSvg .node circle {
  fill: #fff;
  stroke: steelblue;
  stroke-width: 4px;
}

#mapSvg .node {
  font: 12px sans-serif;
}
.red {
  color: red;
  background-color: red;
}
#mapSvg .link {
  fill: none !important;
  stroke: #ccc !important;
  stroke-width: 3px !important;
}
#mapSvg .d1 {
  stroke: #e00001 !important;
  fill: #e00001 !important;
}
#mapSvg .d2 {
  fill: #fe8400 !important;
  stroke: #fe8400 !important;
}
#mapSvg .d3 {
  fill: #ffd700 !important;
  stroke: #ffd700 !important;
}
#mapSvg .d4 {
  fill: #86da0f !important;
  stroke: #86da0f !important;
}
#mapSvg .d5 {
  fill: #24b9fe !important;
  stroke: #24b9fe !important;
}
#mapSvg .d6 {
  fill: #2bebd2 !important;
  stroke: #2bebd2 !important;
}
#mapSvg .d7 {
  fill: #ae59ee !important;
  stroke: #ae59ee !important;
}
#mapSvg .d8 {
  fill: #ff6dbc !important;
  stroke: #ff6dbc !important;
}
#mapSvg .d9 {
  fill: #7f6ffa !important;
  stroke: #7f6ffa !important;
}
#mapSvg .lizhi1 {
  fill: rgb(153, 153, 153) !important;
  stroke: rgb(153, 153, 153) !important;
}

#mapSvg .aaa {
  /* height:950px; */
  min-height: 2000px;
}
/* #mapSvg .biaoshi .juese:before {
      content: " ";
      width: 15px;
      height: 15px;
      display: inline-block;
      border: 3px solid red;
      vertical-align: middle;
      border-radius: 50%;
      margin-right: 5px;
    } */
.yuan {
  content: " ";
  width: 15px;
  height: 15px;
  display: inline-block;
  border: 3px solid red;
  vertical-align: middle;
  border-radius: 50%;
  margin-left: 10px;
}
#mapSvg .aaa svg {
  /*padding-top: 10px;*/
  overflow: initial;
}
#mapSvg .biaoshi {
  background-color: #fff;
  height: 40px;
  line-height: 40px;
  text-align: right;
  padding-right: 15px;
}
#mapSvg .biaoshi .juese {
}
/* #mapSvg .biaoshi .juese:nth-child(1):before {
      border-color: #e00001;
      background-color: #e00001;
    }
    #mapSvg .biaoshi .juese:nth-child(2):before {
      border-color: #fe8400;
      background-color: #fe8400;
    }
    #mapSvg .biaoshi .juese:nth-child(3):before {
      border-color: #ffd700;
      background-color: #ffd700;
    }
    #mapSvg .biaoshi .juese:nth-child(4):before {
      border-color: #86da0f;
      background-color: #86da0f;
    }
    #mapSvg .biaoshi .juese:nth-child(5):before {
      border-color: #24b9fe;
      background-color: #24b9fe;
    }
    #mapSvg .biaoshi .juese:nth-child(6):before {
      border-color: #2bebd2;
      background-color: #2bebd2;
    }
    #mapSvg .biaoshi .juese:nth-child(7):before {
      border-color: #ae59ee;
      background-color: #ae59ee;
    }
    #mapSvg .biaoshi .juese:nth-child(8):before {
      border-color: #ff6dbc;
      background-color: #ff6dbc;
    }
    #mapSvg .biaoshi .juese:nth-child(9):before {
      border-color: #7f6ffa;
      background-color: #7f6ffa;
    } */

.yuan.lizhi {
  border-color: rgb(153, 153, 153);
  background-color: rgb(153, 153, 153);
}
#mapSvg .biaoshi .juese#jueseNo {
  fill: #fff !important;
  stroke: steelblue !important;
  stroke-width: 3px !important;
}
.line {
  height: 0px;
  border-bottom: 1px solid #ddd;
}
</style>
    
    <template>
        <div>
            <product-title></product-title>
            <div class="mapBox">
                <h3 class="search-h3">快速搜索</h3>
            </div>
            <div class="common-box-body mapBox">
                <Row>
                    <Form >
                        <Col :lg="6" :md="24">
                            <FormItem label="分支结构">
                                <Select v-model="yun_org_id">
                                    <Option value="0">本公司</Option>
                                    <Option v-for="item in allJG" :value="item._id" :key="item._id">{{item.shortn}}</Option>
                                </Select>
                            </FormItem>
                        </Col>
                        <Col :lg="6" :md="24">
                            <FormItem label="在职状态">
                                <Select v-model="status">
                                    <Option value="1">在职</Option>
                                    <Option value="0">全部</Option>
                                </Select>
                            </FormItem>
                        </Col>
                        <Col :lg="6" :md="24">
                            <FormItem >
                                <Select @on-change="mapReset" v-model="zhiji">
                                    <Option value="工号">工号</Option>
                                    <Option value="职级">职级</Option>
                                    <Option value="分部">分部</Option>
                                    <Option value="分支机构">分支机构</Option>
                                </Select>
                            </FormItem>
                        </Col>
                        <Col :lg="6" :md="24" style="text-align:right;">
                            <Button type="info" icon="ios-search" @click="mapReset">搜索</Button>
                            <Button class="tRight" @click="$router.back(-1)" type="primary" size="large">返回</Button>
                        </Col>
                    </Form>
                </Row>
                <Row>
                    <div class="line"></div>
                </Row>
                <Row>
                    <div id="mapSvg" class="mapBox" style="overflow-y:auto;">
                       <div class="biaoshi">
                            <template v-for="(item,index) in biaoshi">
                              <span class="yuan" :class="'a'+item.id"></span>
                              <span  class="juese" >{{item.name}}</span>
                            </template>
                            <template>
                              <span class="yuan lizhi"></span>
                              <span class="lizhi">离职 </span>
                            </template>
                        </div>
                        <!-- <div class="biaoshi"> -->
                            <!-- <span v-for="(item,index) in biaoshi" class="juese">{{item.name}}</span> -->
                            <!-- <span class="juese lizhi">离职</span> -->
                            <!-- <span class="juese " id="jueseNo">未设置职级</span> -->
                        <!-- </div> -->
                        <div class="aaa" id="aaa" ref="aaa"></div>
                    </div>
                </Row>
            </div>
        </div>
    </template>
    <script>
import echarts from "echarts";
import * as d3 from "d3";
import productTitle from "../../components/productTitle";
import { bloodMap, frameworkMap, allJG, map } from "../../api/employee";
export default {
  data() {
    return {
      tree: {},
      color: {},
      status: "1",
      biaoshi: [],
      allJG: [],
      yun_org_id: "0",
      one: false,
      zhiji: ""
    };
  },
  components: {
    productTitle
  },
  created() {
    // this.makeMap();
    this.alljiG();
  },
  mounted() {
    this.getdata();
  },
  updated() {
    //  this.makeMap();
  },
  methods: {
    alljiG() {
      new Promise((rev, rej) => {
        allJG()
          .then(res => {
            if (res.data.err == 0) {
              this.allJG = res.data.data;
            } else {
              this.$Message("暂无可选机构");
            }
            rev();
          })
          .catch(error => {
            rej(error);
          });
      });
    },
    makeMap(data) {
      document.getElementById("aaa").style.height =
        30 * data.children.length + "px";
      let margin = {
          top: 20,
          right: 120,
          bottom: 20,
          left: 120
        },
        width = 1300 - margin.right - margin.left,
        height =
          parseInt(getComputedStyle(document.getElementById("aaa")).height) -
          margin.top -
          margin.bottom;
      console.log(getComputedStyle(document.getElementById("aaa")).height);

      //   var height = 20*data.children.length;

      let _this = this;
      let i = 0,
        duration = 750,
        root;

      let tree = d3.layout.tree().size([height, width]);
      this.tree = tree;
      let diagonal = d3.svg.diagonal().projection(function(d) {
        return [d.y, d.x];
      });
      let svg = d3
        .select("#aaa")
        .append("svg")
        .attr("width", width + margin.right + margin.left)
        .attr("height", height + margin.top + margin.bottom) //加数字  因为高度可能不够会显示不全  width  一样
        .append("g")
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

      // d3.json("flare.json", function(error, flare) {

      let flare = data;
      //   if (error) throw error;

      root = flare;
      root.x0 = height / 2;
      root.y0 = 0;

      function collapse(d) {
        if (d.children) {
          d._children = d.children;
          d._children.forEach(collapse);
          d.children = null;
        }
      }

      root.children.forEach(collapse);
      update(root);
      // });

      d3.select(self.frameElement).style("height", "800px");

      function update(source) {
        // Compute the new tree layout.
        let nodes = tree.nodes(root).reverse(),
          links = tree.links(nodes);

        // Normalize for fixed-depth.
        nodes.forEach(function(d) {
          console.log(d);
          d.y = d.depth * 180;
        });

        // Update the nodes…
        let node = svg.selectAll("g.node").data(nodes, function(d) {
          return d.id || (d.id = ++i);
        });

        // Enter any new nodes at the parent's previous position.
        let nodeEnter = node
          .enter()
          .append("g")
          .attr("class", "node")
          .attr("transform", function(d) {
            console.log(d);
            return "translate(" + source.y0 + "," + source.x0 + ")";
          })
          .on("click", click);

        nodeEnter
          .append("circle")
          .attr("r", 1e-6)
          .style("fill", function(d) {
            return d._children ? "lightsteelblue" : "#fff";
          })
          .attr("class", d => {
            if (d.status == 2) {
              return "lizhi1";
            } else {
              return "a" + d.rank_id;
            }
          });

        nodeEnter
          .append("text")
          .attr("x", function(d) {
            return d.children || d._children ? -10 : 10;
          })
          .attr("dy", ".35em")
          .attr("text-anchor", function(d) {
            return d.children || d._children ? "end" : "start";
          })
          .text(function(d) {
            var str = "";
            if (!d.name) {
              return "无名";
            }
            if (_this.zhiji == "工号") {
              str = d.name + "(" + d.job_code + ")";
            } else if (_this.zhiji == "职级") {
              str = d.name + "(" + d.rank_name + ")";
            } else if (_this.zhiji == "分部") {
              str = d.name + "(" + d.branch + ")";
            } else if (_this.zhiji == "分支机构") {
              str = d.name + "(" + d.org_name + ")";
            } else {
              return d.name;
            }

            return str;
            // return d.name;
          })
          .style("fill-opacity", 1e-6);

        // Transition nodes to their new position.
        let nodeUpdate = node
          .transition()
          .duration(duration)
          .attr("transform", function(d) {
            return "translate(" + d.y + "," + d.x + ")";
          });

        nodeUpdate
          .select("circle")
          .attr("r", 8)
          .style("fill", function(d) {
            return d._children ? "lightsteelblue" : "#fff";
          });

        nodeUpdate.select("text").style("fill-opacity", 1);

        // Transition exiting nodes to the parent's new position.
        let nodeExit = node
          .exit()
          .transition()
          .duration(duration)
          .attr("transform", function(d) {
            return "translate(" + source.y0 + "," + source.x0 + ")";
          })
          .remove();

        nodeExit.select("circle").attr("r", 1e-6);

        nodeExit.select("text").style("fill-opacity", 1e-6);

        // Update the links…
        let link = svg.selectAll("path.link").data(links, function(d) {
          return d.target.id;
        });

        // Enter any new links at the parent's previous position.
        link
          .enter()
          .insert("path", "g")
          .attr("class", "link")
          .attr("d", function(d) {
            let o = {
              x: source.x0,
              y: source.y0
            };
            return diagonal({
              source: o,
              target: o
            });
          });

        // Transition links to their new position.
        link
          .transition()
          .duration(duration)
          .attr("d", diagonal);

        // Transition exiting nodes to the parent's new position.
        link
          .exit()
          .transition()
          .duration(duration)
          .attr("d", function(d) {
            let o = {
              x: source.x0,
              y: source.y0
            };
            return diagonal({
              source: o,
              target: o
            });
          })
          .remove();

        // Stash the old positions for transition.
        nodes.forEach(function(d) {
          d.x0 = d.x;
          d.y0 = d.y;
        });
      }

      //   Toggle children on click.
      function click(d) {
        if (d.children) {
          d._children = d.children;
          d.children = null;
        } else {
          d.children = d._children;
          d._children = null;
        }
        update(d);
      }
    },
    getdata() {
      this.data = new Array();
      console.log(this.data);
      let data = {
        status: this.status,
        yun_org_id: this.yun_org_id
      };
      new Promise((rev, rej) => {
        map(data)
          .then(res => {
            if (res.data.err == 0) {
              this.datacount = res.data.count;
              this.data = JSON.parse(JSON.stringify(res.data.data));
              let dom = document.createElement("style");
              let str = "";
              let _this = this;
              this.biaoshi = res.data.rank_data;
              let colorArray = [
                "#e00001",
                "#fe8400",
                "#ffd700",
                "#86da0f",
                "#24b9fe",
                "#2bebd2",
                "#ae59ee",
                "#ff6dbc",
                "#2e7ee1",
                "#454926"
              ];
              for (let i = 0; i < res.data.rank_data.length; i++) {
                str +=
                  ".a" +
                  res.data.rank_data[i].id +
                  "{" +
                  "border-color:" +
                  colorArray[i] +
                  " !important;background-color:" +
                  colorArray[i] +
                  " !important;stroke:" +
                  colorArray[i] +
                  " !important}";
                let key = "a" + res.data.rank_data[i].id;
                let val = colorArray[i];
                _this.color[key] = val;
              }

              dom.innerHTML = str;
              document.getElementsByTagName("head")[0].appendChild(dom);
              //   setTimeout(function(){
              _this.makeMap(_this.data);
              //   },3000)
            } else {
              this.$Message("暂无可选机构");
            }
            rev();
          })
          .catch(error => {
            rej(error);
          });
      });
    },
    mapReset() {
      this.$refs["aaa"].innerHTML = "";
      document.getElementById("aaa").style.height = "0px";
      this.getdata();
    }
  }
};
</script>